<template>
    <div class="login_container">
        <!-- 登录盒子 -->
        <div class="login_box">
            <!-- logo区域 -->
            <img ref="touxiang" src="../assets/img/logo.png" class="avatar_box" alt="">
            <!-- 表单区域 -->
            <el-form class="login_form" :rules="ruleform" ref="form" :model="loginform" label-width="70px">
                <!-- 2、将变量数据和表单组件捆绑！ -->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginform.username" placeholder="请输入用户名" clearable>
                       <i slot="prefix" class="el-input__icon el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginform.password" placeholder="请输入密码" clearable show-password>
                       <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <!-- 3、绑定登录和重置事件 -->
                    <el-button @click="login" type="primary">登录</el-button>
                    <el-button @click="reset" type="warning">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
          return {
              // 1、表单绑定数据
              loginform:{
                 username:"admin",  // 用户名
                 password:"123456"   // 密码
              },
              // 4、表单验证对象规则
              ruleform:{
                username:[
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                  { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password:[
                   { required: true, message: '请输入密码', trigger: 'blur' },
                ]
              }
          }
        },
        methods: {
          // 登录事件
          login(){
            // 5、登录事件
            // 5.1  验证表单数据是否符合要求
            this.$refs.form.validate(async valid=>{  // valid 布尔值，表单验证是否通过！
              if(!valid) return  // 验证没有通过跳出！
              // 验证通过了
              // 5.2  根据接口提交数据 【使用axios！】
              let { data:res }= await this.$axios.post("login",this.loginform)
              // 5.3  处理请求结果,成功跳转到后台主页! 错误提示错误信息!
              // 错误弹框
              if(res.meta.status!==200) return this.$message.error(res.meta.msg)
              // 成功弹框
              this.$message.success("登录成功！")
              // 存储登录信息到本地存储
              sessionStorage.setItem("SHOP_USERINFO",JSON.stringify(res.data))
              // 跳转到后台主页
              this.$router.push("/home")
            })
           
          },
          // 重置事件
          reset(){
            console.log("重置事件重置事件");
            // 表单组件的重置方法！
            this.$refs.form.resetFields()
          }
        }
    }
// 【补充1：】
// ref的作用： 获取原生DOM节点或组件对象！
// 使用：  <标签 ref="名称" />   this.$refs.名称 获取整个DOM或者组件对象！
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b5b6b;
  height: 100vh;
}
.login_box {
  width: 450px;
  height: 300px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
</style>